---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Draw &amp; animate a line on a map
description: Create a sine wave by dynamically drawing a polyline on a map.
tags:
  - animation
  - vector
---
<div id='map'></div>

<script>
var map = L.mapbox.map('map')
    .setView([0, 0], 3)
    .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));;

// Add a new line to the map with no points.
var polyline = L.polyline([]).addTo(map);

// Keep a tally of how many points we've added to the map.
var pointsAdded = 0;

// Start drawing the polyline.
add();

function add() {

    // `addLatLng` takes a new latLng coordinate and puts it at the end of the
    // line. You optionally pull points from your data or generate them. Here
    // we make a sine wave with some math.
    polyline.addLatLng(
        L.latLng(
            Math.cos(pointsAdded / 20) * 30,
            pointsAdded));

    // Pan the map along with where the line is being added.
    map.setView([0, pointsAdded], 3);

    // Continue to draw and pan the map by calling `add()`
    // until `pointsAdded` reaches 360.
    if (++pointsAdded < 360) window.setTimeout(add, 100);
}
</script>
